<script>
export default {
  data() {
    return {
      show: false,
      loading: false,
      requestParam:{
        groupCode: "clientImage",
        code: "",
        fileId: ""
      },
    }
  },
  created() {
  },
  methods: {
    open(row) {
      this.requestParam={
        groupCode: "clientImage",
        code: "",
        fileId: ""
      }
      this.show = true;
    },
    close(){
      this.show = false;
    },
    chooseImg() {
      let loading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // 选择文件
      this.$kt.file.chooseImageOne().then(res => {
        this.$emit("startUpload");
        this.close();
        // 上传这个文件
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: this.requestParam.groupCode,
          code: this.requestParam.code,
          stateSuccess: (res) => {
            this.$emit("endUpload", res.data.id);
            this.requestParam.fileId = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            this.$message.error(res.errMsg);
          }
        });
      });
    },
    toChooseImg(){
      // 如果编码为空
      if(this.requestParam.code === ""){
        this.$message.error("请先输入编码");
        return;
      }

      this.$confirm('请确保编码的完整性？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.chooseImg();
      }).catch(() => {
        // 取消
      });
    }
  }
}
</script>

<template>
  <el-dialog
      v-loading="loading"
      title="新增/修改"
      draggable
      width="500px"
      v-model="show">
    <el-scrollbar style="max-height: calc(100vh - 100px);">
      <div style="text-align: center">
        <el-input class="code-input"
                  v-model="requestParam.code"
                  placeholder="请输入编码"
                  style="width: 200px"
        >
          <template #prepend>编码</template>
        </el-input>
      </div>
      <div style="height: 20px"></div>
      <div style="text-align: center">
        <div style="display: inline-block;position: relative">
          <el-image
              @click="toChooseImg()"
              v-if="!requestParam.fileId"
              class="img img-upload"
              src="/none.svg"
              fit="fill">
          </el-image>
          <el-image
              v-else
              class="img img-upload"
              :src="$kt.file.visit(requestParam.fileId)"
              fit="fill">
          </el-image>

          <div
              @click="toChooseImg()"
              class="upload-btn">上传/重新选择</div>
        </div>
      </div>


    </el-scrollbar>

  </el-dialog>

</template>

<style scoped lang="scss">
.content-textarea {
  width: 100%;
  height: 200px;
}

.img{
  width: 200px;
  height: 200px;
  background-color: rgba(118,118,118,.2);
  border-radius: 10px;
}

.upload-btn{
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.8);
  color: #FFFFFF;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 0 0 10px 10px;
}

.upload-btn:hover{
  font-size: 13px;
}

.upload-btn:active{
  font-size: 12px;
}

.code-input{
  width: 300px;
  height: 40px;
  border-radius: 5px;
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
}
</style>